import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,ScrollView } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import Footer from '../index/footer'
import Shopfoot from '../index/Shopfoot'
import '../../assets/animate.min.scss'
import './mall.scss'
import './goodscat.scss'



export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
       flindex:0,
	   goodslist:[],
	   goodscat:[],
	   pageheight:0,//获取高度
	   pageNumber:1,//页码数
       scrollPd:false,//是否可滑动
       hasNextPage:false,//是否有下一页
	}
  }
  config = {
    navigationBarTitleText: '加载中'
  }

  open(url,type){
    this.$preload({
      type:type
    })
    CommonJs.openTo(url);
  }


  componentWillMount () {
    this.getQunName();
    this.getcat();

  }


  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  getQunName(){
	var dateinfo = Taro.getStorageSync('dateinfo')
    var date1={id:dateinfo.qid}
	var _this=this;
	var wh=0;
	Taro.getSystemInfo({
	  success:function(res){
		wh=res.windowHeight;
	  }
	})
	var query=Taro.createSelectorQuery()
	query.select('.mypage').boundingClientRect(function(rect){
	  //console.log(wh+'//'+rect.height+"//sssdssssss")
	  _this.setState({
		  pageheight:wh-rect.height
	  })
	}).exec();
    CommonJs.ajaxRequest('/cluster/getEntityAndLoginId',date1,'GET',function(res){
	  if(res.content){
		Taro.setNavigationBarTitle({title:res.content.name})
	  }
    })
  }
  getcat(){
	var shopId = Taro.getStorageSync('shopId')
    var url='/commodity/papi/v2.0/item-groups/'+shopId
    var _this=this;
    CommonJs.ajaxRequest(url,'','GET',function(res){
       _this.setState({
        goodscat: res.data
      })
      if(res.data.length>0){
        var type=_this.$router.preload.type;
        console.log(JSON.stringify(_this.$router.preload))
        if(!type.type){
          for(var i=0;i<res.data.length;i++){
            if(type==res.data[i].id){
              _this.setState({
                flindex:i
              })
            }
          }
           _this.getGoodsByCatid(0,type)
        }
        else{

          _this.getGoodsByCatid(0,res.data[0].id)
        }
      }
    })
  }
  choosefl(index){
    this.setState({
      flindex:index,
      goodslist:[]
      })
    this.getGoodsByCatid(0,this.state.goodscat[index].id)
  }
  getGoodsByCatid(pageNumber,id){
	var url='/mall/papi/v1.9/item?itemGroupId='+id+'&page='+pageNumber+'&activeStatus=ENABLE'
	var _this=this;
    CommonJs.ajaxRequest(url,'','GET',function(res){

		 if(res.data.page<res.data.totalPages){
			var hasNextPage = true
		 }
		 else{
			var hasNextPage = false
		 }
          var results = _this.state.goodslist
          var result = res.data.list;
          for(var i = 0; i < result.length; i++){
            results.push(result[i])
          }
          if (hasNextPage) {
            _this.setState({
              goodslist:results,
              pageNumber: res.data.page,
              hasNextPage: hasNextPage,
              scrollPd: true
            })
          }
		  else {
            _this.setState({
              goodslist:results,
              pageNumber: res.data.page,
              hasNextPage: hasNextPage,
              scrollPd: false
            })
          }

    })
  }
  loadMore(){
    var _this = this;
    var pd = _this.state.scrollPd;
    if(pd) {
      //防止多次触发滑动到底部事件
      _this.setState({
        scrollPd: false//禁止下拉
      })
      var pageNumber = _this.state.pageNumber + 1;
	  var cindex=_this.state.flindex;
	  var goodscat=_this.state.goodscat;
      _this.getGoodsByCatid(pageNumber,goodscat[cindex].id);
    }else{
      var hasNextPage =  _this.state.hasNextPage;
      if(hasNextPage){
        Taro.showToast({
            title:'正在加载数据...',
            icon: 'none',
            duration: 2000
          });
      }else{
        Taro.showToast({
            title:'没有更多数据啦！',
            icon: 'none',
            duration: 2000
          });
      }
    }
  }
  goodsxq(index){
	this.open('/pages/mall/goodsxq',this.state.goodslist[index].id)
  }
  render () {
    const goodscat= this.state.goodscat;
	const goodslist= this.state.goodslist;
	const flindex=this.state.flindex;
    return (
      <View className='page footpage'>
        <View className='mallPage'>
			<View className='goodscat' style={goodscat.length>0?'display:block':'display:none;'}>
				<View className='shoplist-fl'>

					{goodscat.length>0&&goodscat.map((item, index) => (
						<Text className={index==this.state.flindex?'fl-li fl-cur':'fl-li'} onClick={this.choosefl.bind(this,index)}>{item.groupName}</Text>
					))}
				</View>
				<View className='shop-list shop-listts' style={goodslist.length>0?'display:block':'display:none;'}>
				<ScrollView className='mypage' scrollY='true' style={'height:'+this.pageheight+'px'} onScrollToLower={this.loadMore.bind(this,'')}>
					{goodslist.map((item, index) => (
						<View className='goods-li' onClick={this.goodsxq.bind(this,index)}>
							<View className="goods-logo-box"><Image className='goods-logo' mode='scaleToFill' src={item.logoUrl?item.logoUrl:'https://minichat.g2ma.com/kedouimg/A6984900727459logo.png'}></Image></View>
							<View className='goods-text'>
								<View className='goodsc-name'>{item.name}</View>
								<View className='goodsc-pri'>￥<Text className='ts'>{item.price.specialPrice/100}</Text></View>
								<View className='goodsc-yj'>
									<Text className='ts01'>￥{item.price.marketPrice/100}</Text>
									<Text className='ts02'>已售{item.saleStock.saleAmount}件</Text>
								</View>
							</View>
						</View>
					))}
				</ScrollView>
				</View>
				<View className='shop-list shop-listts' style={goodslist.length>0?'display:none':'display:block;'}>
					<View className="nodate">该分类下暂无商品，敬请期待</View>
				</View>
			</View>
			<View className='goodscat' style={goodscat.length>0?'display:none':'display:block;'}>
				<View className="nodate">该群还暂未上传商品，敬请期待</View>
			</View>
		</View>
		<Shopfoot porpNav="1"></Shopfoot>
      </View>
    )
  }
}
